<template>
  <div class="login">
    <div class="back">
      <div class="x"
           @click="hiddenLogin()"><img src="~assets/img/user/x.svg"></div>
      <div class="son">
        <img src="~assets/img/user/phone.svg"
             alt="">
      </div>
    </div>
    <div class="main">
      <div class="chooes">
        <span class="psd"
              @click="padClick()">密码登陆</span>
        <span class="message"
              @click="mesClick()">邮箱登陆</span>
      </div>
      <div>
        <div class="from-item"
             v-if="currentIndex==1">
          <input type="text"
                 name="phone"
                 id="phone"
                 placeholder="请输入手机号"
                 required
                 v-model="phone"
                 @blur="phoneVerify()">
          <p>{{phoneMessage}}</p>
        </div>
        <!-- 邮箱 -->
        <div class="from-item"
             v-if="currentIndex==2">
          <input type="email"
                 name="email"
                 id="email"
                 placeholder="请输入邮箱"
                 v-model="email">
          <p>{{emailMessage}}</p>
        </div>
        <!-- 密码 -->
        <div class="from-item">
          <input type="password"
                 name="password"
                 id="password"
                 placeholder="请输入密码"
                 v-model="password">
          <p>{{pwdMessage}}</p>
        </div>
        <div class="from-item">
          <input type="submit"
                 value="登陆"
                 class="log"
                 @click="login()">
        </div>
        <div class="from-item">
          <div class="register"
               @click="showRegister()">注册</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { _login, _getcaptcha, _email } from 'network/user'
export default {
  name: 'Login',
  data () {
    return {
      // 手机登陆
      phone: '',
      phoneMessage: '',
      pwdMessage: '',
      password: '',
      // 邮箱登陆
      email: '',
      emailMessage: '',
      currentIndex: 1
    }
  },
  methods: {
    // 隐藏登录界面
    hiddenLogin () {
      this.$store.commit('hiddenLogin')
    },
    // 手机号码验证
    phoneVerify () {
      if (this.phone === '') {
        this.phoneMessage = '请输入手机号'
      } else {
        const regExp = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        this.phoneMessage = '';
        if (!regExp.test(this.phone)) {
          this.phoneMessage = '手机格式不对'
        }
      }
    },
    // 登陆
    login () {
      switch (this.currentIndex) {
        case 1:
          // 密码登陆
          _login(this.phone, this.password).then(res => {
            if (res.data.code != 200) {
              this.pwdMessage = '密码错误'
            } else {
              this.$store.commit('addUser', res.data)
              this.hiddenLogin()
              localStorage.setItem('cookie', res.data.cookie);
              localStorage.setItem('uid', res.data.profile.userId);
              localStorage.setItem('avatar', res.data.profile.avatarUrl);
              localStorage.setItem('nickname', res.data.profile.nickname);
            }
          })
          break;
        case 2:
          _email(this.email, this.password).then(res => {
          })
          break;
        default:
          break;
      }
      // 强制刷新页面
      window.location.reload(true);
    },
    // 点击获取验证码
    btnclick () {
      _getcaptcha(this.phone).then(res => {
        if (res.data.code != 200) {
          this.captchaMessage = "发送验证码失败"
        } else {
          this.captchaMessage = "发送验证码成功"
        }
      })
    },
    // 密码登陆
    padClick () {
      this.currentIndex = 1;
    },
    // 邮箱登陆
    mesClick () {
      this.currentIndex = 2;
    },
    showRegister () {
      this.hiddenLogin()
      this.$store.commit("showRegister");
    }
  }
}
</script>

<style scoped>
.login {
  width: 400px;
  height: 560px;
  position: relative;
  z-index: 99;
  top: 0;
  background: #fafafa;
}
.back {
  width: 100%;
  height: 30%;
  position: relative;
}
.back .x {
  width: 26px;
  height: 26px;
  float: right;
  margin-right: 5px;
  margin-top: 5px;
}
.x img {
  width: 100%;
}
.son {
  width: 58px;
  height: 102px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -20%);
}
.son img {
  width: 100%;
}
.main .chooes {
  margin-bottom: 15px;
}
.main span {
  color: #333;
  font-size: 15px;
  padding: 0 60px;
}
.from-item {
  width: 60%;
  margin: 0 auto;
  padding: 10px 0 10px 10px;
  color: red;
}
.from-item input {
  width: 200px;
  height: 2em;
}
.from-item p {
  font-size: 13px;
}
.from-item .log {
  outline-style: none;
  background: red;
  color: #fff;
  border: 0;
  height: 40px;
  border-radius: 10px;
}
.register {
  font-size: 13px;
  color: #333;
  text-align: center;
  margin-right: 35px;
}
/* 验证码 */
.btn {
  width: 200px;
  height: 30px;
}
</style>
